<template>
  <div class="_battle-result" :class="{ _mobile: props.isMobile }">
    <div class="_user-list">
      <div
        class="_user-item"
        v-for="user in props.battle?.result || []"
        :key="user.user_id"
      >
        <img :src="WinIcon" class="_win-icon" />
        <div class="_image-wrapper">
          <img :src="user?.user_head" class="_head" />
        </div>
        <div class="_user-name _text-small _text-ellipsis w-full text-center">
          {{ user?.user_name }}
        </div>
        <!-- class="_win _text-ellipsis w-full text-center" -->
        <div
          class="_win w-full text-center relative"
          :class="{
            '_text-middle': !props.isMobile,
            '_text-small text-0.65rem': props.isMobile,
          }"
        >
          <div class="absolute" style="left: 50%; transform: translateX(-50%);">
            <span class="mr-0.4rem">Win</span>
            <span>${{ user.win_amount }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="_btn-wrapper">
      <el-button
        class="_btn-item"
        size="large"
        type="primary"
        @click="onCreateCommonBattle"
      >
        <div class="_btn">Recreate This Battle</div>
      </el-button>
      <el-button
        class="_btn-item"
        size="large"
        type="info"
        @click="onOpenModal"
      >
        <div class="_btn"><img :src="Add" />Create a New Battle</div>
      </el-button>
    </div>

    <create-battle v-model:open="modalToggleInfo.toggle" />

    <vue3-lottie class="_celebrate" :loop="false" :animation-data="celebrate" />
  </div>
</template>

<script lang="tsx" setup>
import { ElMessageBox } from "element-plus";
import { Vue3Lottie } from "vue3-lottie";

import { createCommonBattle } from "@/api/battles";
import { onBuriedPoint } from "@/api/user";
import Add from "@/assets/add.png";
import celebrate from "@/assets/json/celebrate.json";
import WinIcon from "@/assets/win.png";
import { useModalToggle } from "@/hooks/useModalToggle";
import { useAuth } from "@/store/auth";
import { useBasic } from "@/store/basic";

import CreateBattle from "../../CreateBattle/createBattle.vue";
import { battleResultProps } from "./battleResult";

const props = defineProps(battleResultProps);

const route = useRoute();
const router = useRouter();
const { modalToggleInfo, onOpenModal } = useModalToggle();
const auth = useAuth();
const basic = useBasic();

function onCreateCommonBattle() {
  ElMessageBox.confirm(
    `Confirm to cost $${props.battle?.cost_amount} to recreate this battle?`,
    "",
    {
      confirmButtonText: "Confirm",
      cancelButtonText: "Cancel",
      cancelButtonClass: "el-button--info",
      type: "warning",
      callback: async (res) => {
        if (res === "confirm") {
          const result = await createCommonBattle({
            battle_id: props.battle?.battle_id,
          });
          if (result) {
            const href = router.resolve(`/battles/${result?.battle_id}`);
            window.open(href.href, "_self");
          }
          onBuriedPoint({
            page_name: "battle-详情",
            action: "点击按钮",
            button_name: "Recreate This Battle",
            ...(route.params || {}),
          });
        }
      },
    }
  );
}

onBeforeMount(async () => {
  if (props.isPlayWinAudio) {
    basic.audio.winPlay();
    const isSelfBattle = props.battle.user_list.find(
      (item) => `${item.user_id}` === `${auth.userId}`
    );
    isSelfBattle && auth.getUnprocessedList();
  }
});
</script>

<style lang="less" scoped>
._battle-result {
  @apply relative flex flex-col items-center;
  gap: 4.13rem;
  ._user-list {
    @apply flex items-center;
    gap: 3rem;
    ._user-item {
      @apply relative flex flex-col items-center justify-center;
      padding-top: 3.75rem;
      width: 7.5rem;
      ._image-wrapper {
        width: 100%;
        aspect-ratio: 1/1;
        min-height: 0;
        ._head {
          @apply w-full h-full;
          object-fit: contain;
        }
      }

      ._win-icon {
        @apply absolute;
        top: 0;
        left: -1.13rem;
        width: 7.99rem;
        aspect-ratio: 7.99 / 5.86;
        object-fit: contain;
      }

      ._user-name {
        color: #9d9d9d;
        margin-top: 1.19rem;
        margin-bottom: 1.06rem;
      }
    }
  }

  ._btn-wrapper {
    @apply relative z-1;
    ._btn {
      @apply flex items-center justify-center;
      gap: 0.63rem;
      width: 22.5rem;
      font-size: 1.13rem;
      line-height: 1.56rem;
      img {
        width: 1.25rem;
        aspect-ratio: 1/1;
        min-height: 0;
        object-fit: contain;
      }
    }
  }

  ._celebrate {
    @apply absolute top-0 left-0 right-0 bottom-0;
  }

  &._mobile {
    gap:2rem;
    width: 100%;
    ._user-list {
      gap: 2.6rem;
      ._user-item {
        padding-top: 1.82rem;
        width: 3.31rem;
        ._win-icon {
          left: -0.58rem;
          width: 3.67rem;
          aspect-ratio: unset;
        }
        ._user-name {
          margin: 0.5rem 0 0.51rem;
          font-size: 0.75rem !important;
        }
        ._win {
          font-size: 0.75rem !important;
        }
      }
    }
    ._btn-wrapper {
      @apply flex flex-col w-full;
      gap: 1.5rem;
      padding: 0 2.63rem;
      ._btn-item {
        width: 100%;
        margin: 0;
        ._btn {
          width: unset;
        }
      }
    }
  }
}
</style>
